{header}
<script type="text/javascript">
  var file_list_i = [];
  var file_list_v = [];
  var remove_file_list = [];
  var is_upload_success_list_i = [];
  var is_upload_success_list_v = [];
</script>
<link rel="stylesheet" type="text/css" href="/static/plugins/webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="/static/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<div class="card">
  <div class="card-header">
    操作
  </div>
  <div class="card-body">
    <button type="button" class="btn btn-primary" id="save">提交</button>
  </div>
</div>
<form>
  <div class="form-group">
    <label for="title">标题</label>
    <div class="form-control">{title}</div>
  </div>
  <div class="form-group">
    <label for="requirement">剪辑要求</label>
    <div class="form-control" aria-describedby="requirement">{clip_requirement}</div>
  </div>
  <div id="uploader_images" class="wu-example">
    <label>4张图片</label>
    <div>1920*1080 一张</div>
    <div>1079*1440 三张</div>
    <div class="btns">
        <div id="i-picker">选择文件</div>
    </div>
  </div>
  <ul class="list-group" id="upload_image_list">
  </ul>
  <div id="uploader_videos" class="wu-example">
    <label>4个视频</label>
    <div class="btns">
        <div id="v-picker">选择文件</div>
    </div>
  </div>
  <ul class="list-group" id="upload_video_list">
  </ul>
  <script type="text/javascript">
    var i_uploader = WebUploader.create({
        // swf文件路径
        swf: '/static/plugins/webuploader-0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: '{base_url}library/clip_image_upload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#i-picker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
		compress: false,
        fileNumLimit: 4,
        accept: {
          mimeTypes: 'image/*'
        }
    });
    var v_uploader = WebUploader.create({
        // swf文件路径
        swf: '/static/plugins/webuploader-0.1.5/Uploader.swf',
        // 文件接收服务端。
        server: '{base_url}library/clip_video_upload',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#v-picker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        fileNumLimit: 4,
        accept: {
          mimeTypes: 'video/*'
        }
    });
    function remove_file(file_id, list_id, file_name_id) {
      if (file_id !== 0) {
        if (list_id === 'upload_image_list') {
          i_uploader.removeFile(file_id, true);
          delete is_upload_success_list_i[file_id];
          for (var i in file_list_i) {
            if (file_list_i[i][0] === file_id) {
              file_list_i.splice(i, 1);
              break;
            }
          }
        } else if (list_id === 'upload_video_list') {
          v_uploader.removeFile(file_id, true);
          delete is_upload_success_list_v[file_id];
          for (var i in file_list_v) {
            if (file_list_v[i][0] === file_id) {
              file_list_v.splice(i, 1);
              break;
            }
          }
        }
      }
      $('#' + list_id + ' #' + file_name_id).remove();
    }

    i_uploader.on('fileQueued', function (file) {
      var ul = $('#upload_image_list');
      var name = file.name.replace(/[\.#!@$%\^\&\(\)]/g, '_');
	  name = name.replaceAll(' ', '_');
      var li = $('<li class="list-group-item d-flex justify-content-between align-items-center" id="' + name + '">' + file.name + '<span class="badge badge-primary" id="i_' + file.id + '">待上传</span><a class="badge badge-danger" href="javascript:void(0);" onclick="remove_file(\'' + file.id + '\', \'upload_image_list\', \'' + name + '\')">删除</a></li>');
      ul.append(li);
    });
    v_uploader.on('fileQueued', function (file) {
      var ul = $('#upload_video_list');
      var name = file.name.replace(/[\.#!@$%\^\&\(\)]/g, '_');
	  name = name.replaceAll(' ', '_');
      var li = $('<li class="list-group-item d-flex justify-content-between align-items-center" id="' + name + '">' + file.name + '<span class="badge badge-primary" id="v_' + file.id + '">待上传</span><a class="badge badge-danger" href="javascript:void(0);" onclick="remove_file(\'' + file.id + '\', \'upload_video_list\', \'' + name + '\')">删除</a></li>');
      ul.append(li);
    });

    i_uploader.on('uploadProgress', function (file, progress) {
      var li = $('#i_' + file.id);
      li.html(parseInt(progress * 100) + '%');
    });
    v_uploader.on('uploadProgress', function (file, progress) {
      var li = $('#v_' + file.id);
      li.html(parseInt(progress * 100) + '%');
    });

    i_uploader.on('uploadError', function (file, reason) {
	  $('#save').attr('disabled', false);
      is_upload_success_list_i[file.id] = false;
      console.error(reason);
      var file_id = $('#i_' + file.id);
      file_id.removeClass('badge-primary');
      file_id.addClass('badge-danger');
      file_id.html('上传失败');
    });
    v_uploader.on('uploadError', function (file, reason) {
	  $('#save').attr('disabled', false);
      is_upload_success_list_v[file.id] = false;
      console.error(reason);
      var file_id = $('#v_' + file.id);
      file_id.removeClass('badge-primary');
      file_id.addClass('badge-danger');
      file_id.html('上传失败');
    });

    i_uploader.on('uploadSuccess', function (file, response) {
	  $('#save').attr('disabled', false);
      var data = response._raw.split(':');
      if (data.length !== 2) {
        is_upload_success_list_i[file.id] = false;
        layer.alert('服务器返回非法数据', {icon: 2});
        return;
      }
      var file_id = $('#i_' + file.id);
      if (data[0] === 'fail') {
        is_upload_success_list_i[file.id] = false;
        file_id.removeClass('badge-primary');
        file_id.addClass('badge-danger');
        if (data[1] === '图片大小错误') {
          file_id.html(data[1]);
        } else {
          file_id.html('上传失败');
        }
        console.error(file.id + '上传失败:' + data[1]);
      } else if (data[0] === 'success') {
        is_upload_success_list_i[file.id] = true;
        file_list_i.push([file.id, data[1]]);
        file_id.html('上传成功');
      } else {
        is_upload_success_list_i[file.id] = false;
        layer.alert('服务器返回多余数据', {icon: 2});
      }
    });
    v_uploader.on('uploadSuccess', function (file, response) {
      var data = response._raw.split(':');
	  $('#save').attr('disabled', false);
      if (data.length !== 2) {
        is_upload_success_list_v[file.id] = false;
        layer.alert('服务器返回非法数据', {icon: 2});
        return;
      }
      var file_id = $('#v_' + file.id);
      if (data[0] === 'fail') {
        is_upload_success_list_v[file.id] = false;
        file_id.removeClass('badge-primary');
        file_id.addClass('badge-danger');
        file_id.html('上传失败');
        console.error(file.id + '上传失败:' + data[1]);
      } else if (data[0] === 'success') {
        is_upload_success_list_v[file.id] = true;
        file_list_v.push([file.id, data[1]]);
        file_id.html('上传成功');
      } else {
        is_upload_success_list_v[file.id] = false;
        layer.alert('服务器返回多余数据', {icon: 2});
      }
    });

    i_uploader.on('uploadFinished', function () {
      for (var i in is_upload_success_list_i) {
        if (is_upload_success_list_i[i] === undefined) {
          continue;
        }
		$('#save').attr('disabled', false);
        if (!is_upload_success_list_i[i]) {
          layer.alert('有文件上传失败，无法提交记录', {icon: 2});
          return;
        }
      }
      v_uploader.upload();
    });
    v_uploader.on('uploadFinished', function () {
      for (var i in is_upload_success_list_v) {
        if (is_upload_success_list_v[i] === undefined) {
          continue;
        }
		$('#save').attr('disabled', false);
        if (!is_upload_success_list_v[i]) {
          layer.alert('有文件上传失败，无法提交记录', {icon: 2});
          return;
        }
      }
      var save = $('#save');
      save.attr('disabled', true);
      var i_list = '';
      var v_list = '';
      for (var i in file_list_i) {
        if (i_list === '') {
          i_list = file_list_i[i][1];
        } else {
          i_list += '|' + file_list_i[i][1];
        }
      }
      for (var i in file_list_v) {
        if (i_list === '') {
          v_list = file_list_v[i][1];
        } else {
          v_list += '|' + file_list_v[i][1];
        }
      }
      $.ajax({
        url: '{base_url}library/upload_clip_order',
        type: 'post',
        data: {
          id: {id},
          i_file_list: i_list,
          v_file_list: v_list
        },
        success: function (data) {
		  $('#save').attr('disabled', false);
          var d = data.split(':');
          save.attr('disabled', false);
          if (d.length !== 2) {
            console.error(data);
            layer.alert('服务器返回非法数据', {icon: 2});
            return;
          }
          if (d[0] === 'fail') {
            layer.alert('上传失败:' + d[1], {icon: 2});
            console.error('上传失败:' + d[1]);
          } else if (d[0] === 'success') {
            location.href = '{base_url}task_list?p=1';
          } else {
            console.error(data);
            layer.alert('服务器返回多余数据', {icon: 2});
          }
        },
        error: function (data) {
          layer.alert('上传失败', {icon: 2});
          console.error(data.responseText);
        }
      });
    });

    $(function () {
      $('#save').on('click', function () {
		$('#save').attr('disabled', true);
        i_uploader.upload();
      });
    });
  </script>
</form>
{footer}

